<template>
  <div class="profile-container">
    <div class="topbar">
      <el-button @click="$router.back()" circle><el-icon><back /></el-icon></el-button>
      <div class="title">个人中心</div>
      <div class="spacer"></div>
    </div>
    
    <div class="profile-content">
      <el-card class="profile-card">
        <template #header>
          <div class="card-header">
            <span>基本信息</span>
          </div>
        </template>
        
        <el-form :model="form" label-width="100px">
          <el-form-item label="头像">
            <el-avatar :size="64">{{ form.nickname?.[0] || 'U' }}</el-avatar>
            <el-button class="upload-btn" size="small">上传头像</el-button>
          </el-form-item>
          
          <el-form-item label="手机号">
            <el-input v-model="form.phone" disabled />
          </el-form-item>
          
          <el-form-item label="昵称">
            <el-input v-model="form.nickname" />
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="handleUpdateInfo" :loading="loading">
              保存
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
      
      <el-card class="profile-card">
        <template #header>
          <div class="card-header">
            <span>密码设置</span>
          </div>
        </template>
        
        <el-form :model="passwordForm" label-width="100px">
          <el-form-item label="旧密码">
            <el-input
              v-model="passwordForm.old_password"
              type="password"
              show-password
            />
          </el-form-item>
          
          <el-form-item label="新密码">
            <el-input
              v-model="passwordForm.new_password"
              type="password"
              show-password
            />
          </el-form-item>
          
          <el-form-item label="确认密码">
            <el-input
              v-model="passwordForm.confirm_password"
              type="password"
              show-password
            />
          </el-form-item>
          
          <el-form-item>
            <el-button
              type="primary"
              @click="handleChangePassword"
              :loading="passwordLoading"
            >
              修改密码
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Back } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'
import { getUserInfo, updateUserInfo } from '@/api/user'
import { changePassword } from '@/api/auth'

const router = useRouter()
const userStore = useUserStore()

const loading = ref(false)
const passwordLoading = ref(false)

const form = reactive({
  phone: '',
  nickname: '',
  avatar_url: ''
})

const passwordForm = reactive({
  old_password: '',
  new_password: '',
  confirm_password: ''
})

const loadUserInfo = async () => {
  try {
    const res = await getUserInfo()
    form.phone = res.data.phone
    form.nickname = res.data.nickname
    form.avatar_url = res.data.avatar_url
  } catch (error) {
    console.error(error)
  }
}

const handleUpdateInfo = async () => {
  try {
    loading.value = true
    await updateUserInfo({
      nickname: form.nickname,
      avatar_url: form.avatar_url
    })
    
    // 更新store
    userStore.setUserInfo({
      ...userStore.userInfo,
      nickname: form.nickname,
      avatar_url: form.avatar_url
    })
    
    ElMessage.success('更新成功')
  } catch (error) {
    console.error(error)
  } finally {
    loading.value = false
  }
}

const handleChangePassword = async () => {
  if (!passwordForm.old_password) {
    ElMessage.warning('请输入旧密码')
    return
  }
  
  if (!passwordForm.new_password) {
    ElMessage.warning('请输入新密码')
    return
  }
  
  if (passwordForm.new_password !== passwordForm.confirm_password) {
    ElMessage.warning('两次密码输入不一致')
    return
  }
  
  try {
    passwordLoading.value = true
    await changePassword(passwordForm.old_password, passwordForm.new_password)
    
    ElMessage.success('密码修改成功')
    passwordForm.old_password = ''
    passwordForm.new_password = ''
    passwordForm.confirm_password = ''
  } catch (error) {
    console.error(error)
  } finally {
    passwordLoading.value = false
  }
}

onMounted(() => {
  loadUserInfo()
})
</script>

<style scoped>
.profile-container {
  min-height: 100vh;
  background: #f3f6fb;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #2a5085;
  color: #e6edf7;
  border-bottom: 1px solid rgba(147, 197, 253, 0.55);
}

.title {
  font-weight: 600;
  font-size: 16px;
}

.spacer {
  flex: 1;
}

.profile-content {
  max-width: 720px;
  margin: 20px auto;
  padding: 0 20px;
}

.profile-card {
  margin-bottom: 20px;
}

.card-header {
  font-weight: 600;
}

.upload-btn {
  margin-left: 12px;
}
</style>

